<!DOCTYPE html>
<html>
<head>
    <title>用户中心</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/common.css" />
    <script src="js/jquery.v1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .navbar-inverse li a {
            color: #FFF;
        }
    </style>
</head>
<body>
    <!--顶部栏目-->
    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" id="header">
        <div class="container">
            <div class="row">
                <div id="backToPrevBtn" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-circle-arrow-left" href="#"></a>
                </div>
                <div id="logo" class="col-xs-6 text-while">
                    <span>your logo</span>
                </div>
                <div id="btnUser" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-user" href="User.html"></a>
                </div>
                <div id="btnShoppingCart" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-shopping-cart" href="ShoppingCart.html"></a>
                </div>
            </div>
        </div>
    </header>
    <!--顶部栏目 END-->
    <!--内容-->
    <div class="wrapper">
        <div class="container norowpadding">
            <!-- banner -->
            <div class="row">
                <div class="banner" style="height: 100px; overflow: hidden; position: relative;">
                    <img src="img/1.jpg" class="img-responsive" style="position: absolute; top: 0px; left: 0px; width: 100%; height: auto; z-index: 1;" />
                    <div style="position: absolute; z-index: 99; padding: 5px 20px;">
                        <h3 class="text-while" style="font-weight: bold;">您好，欢迎来到XXX</h3>
                        <div class="">
                            <a href="#" class="btn btn-default">收货地址管理</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- banner end -->
            <!--<div class="row">
                <div class="col-xs-4"></div>
                <div class="col-xs-4"></div>
                <div class="col-xs-4"></div>
            </div>-->
            <!-- 标签切换 -->
            <div class="row">
                <ul class="nav nav-tabs navbar-inverse" id="nava">
                    <li class="active" style="width: 33%; text-align: center;"><a href="#payment">待付款</a></li>
                    <li style="width: 33%; text-align: center;"><a href="#forTheGoods">待收货</a></li>
                    <li style="width: 33%; text-align: center;"><a href="#ended">已结束</a></li>
                </ul>
                <div id="myTabContent" class="tab-content" style="padding: 5px 20px;">
                    <div class="tab-pane fade active in" id="payment">
                        <!-- 列表中的详细事项 -->
                        <!-- 一个列表中的详细事项 -->
                        <div class="list-group">
                            <div class="list-group-item hasrowpadding">
                                <h4 class="list-group-item-heading">这里是标题</h4>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="img/1.jpg" class="img-responsive" />
                                    </div>
                                    <div class="col-xs-8">
                                        <p>微购物JackJones杰克琼斯棉质男士休闲水洗牛仔长裤I|213232029</p>
                                    </div>
                                </div>
                                <div class="clearfix group-footer">
                                    <span style="float: left;">待付款</span>
                                    <span style="float: right;">共计1件商品 总价<strong class="text-danger">￥500</strong></span>
                                </div>
                                <div style="margin: 10px 0;">
                                    <a class="btn btn-danger col-xs-12" href="#">立即付款</a>
                                </div>
                            </div>
                        </div>
                        <!-- 一个列表中的详细事项 end -->
                        <div class="list-group">
                            <div class="list-group-item hasrowpadding">
                                <h4 class="list-group-item-heading">这里是标题</h4>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="img/1.jpg" class="img-responsive" />
                                    </div>
                                    <div class="col-xs-8">
                                        <p>微购物JackJones杰克琼斯棉质男士休闲水洗牛仔长裤I|213232029</p>
                                    </div>
                                </div>
                                <div class="clearfix group-footer">
                                    <span style="float: left;">待付款</span>
                                    <span style="float: right;">共计1件商品 总价<strong class="text-danger">￥500</strong></span>
                                </div>
                            </div>
                        </div>
                        <div class="list-group">
                            <div class="list-group-item hasrowpadding">
                                <h4 class="list-group-item-heading">这里是标题</h4>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="img/1.jpg" class="img-responsive" />
                                    </div>
                                    <div class="col-xs-8">
                                        <p>微购物JackJones杰克琼斯棉质男士休闲水洗牛仔长裤I|213232029</p>
                                    </div>
                                </div>
                                <div class="clearfix group-footer">
                                    <span style="float: left;">待付款</span>
                                    <span style="float: right;">共计1件商品 总价<strong class="text-danger">￥500</strong></span>
                                </div>
                            </div>
                        </div>
                        <div class="list-group">
                            <div class="list-group-item hasrowpadding">
                                <h4 class="list-group-item-heading">这里是标题</h4>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="img/1.jpg" class="img-responsive" />
                                    </div>
                                    <div class="col-xs-8">
                                        <p>微购物JackJones杰克琼斯棉质男士休闲水洗牛仔长裤I|213232029</p>
                                    </div>
                                </div>
                                <div class="clearfix group-footer">
                                    <span style="float: left;">待付款</span>
                                    <span style="float: right;">共计1件商品 总价<strong class="text-danger">￥500</strong></span>
                                </div>
                            </div>
                        </div>
                        <div class="list-group">
                            <div class="list-group-item hasrowpadding">
                                <h4 class="list-group-item-heading">这里是标题</h4>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="img/1.jpg" class="img-responsive" />
                                    </div>
                                    <div class="col-xs-8">
                                        <p>微购物JackJones杰克琼斯棉质男士休闲水洗牛仔长裤I|213232029</p>
                                    </div>
                                </div>
                                <div class="clearfix group-footer">
                                    <span style="float: left;">待付款</span>
                                    <span style="float: right;">共计1件商品 总价<strong class="text-danger">￥500</strong></span>
                                </div>
                            </div>
                        </div>
                        <!-- 列表中的详细事项 end -->
                    </div>
                    <div class="tab-pane fade" id="forTheGoods">
                        <div class="noMSG">
                            暂时没有信息
                        </div>
                    </div>
                    <div class="tab-pane fade" id="ended">
                        <div class="noMSG">
                            暂时没有信息
                        </div>
                    </div>
                </div>
            </div>
            <!-- 标签切换 end -->
        </div>
    </div>
    <!--内容 END-->

    <!--脚部导航-->
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-4"><a href="#" class="text-n">户首页页</a></div>
                <div class="col-xs-4"><a href="#">会员中心</a></div>
                <div class="col-xs-4"><a href="#">品牌介绍</a></div>
            </div>
        </div>
    </footer>
    <!--脚部导航 END-->
</body>
</html>
<script>
    $(function () {
        $('#nava a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
    })
</script>
